<!--
 * @Descripttion: 批量价格设置弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 14:00:00
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-24 17:39:33
-->
<template>
  <div>
    <KiFormDialog
      :show.sync="form.show"
      title="批量价格设置"
      v-model="form.data"

      class="form-dialog"
      @close="handleDialogClose"
    >
      <!-- <div>form={{ form }}</div>
      <br />
      <div>tableDate.data={{ tableDate.data }}</div>
       -->
      <h2 v-if="form.data">
        <strong>{{form.data.roomTypeName}}</strong>
        <strong>{{form.data.roomName}}</strong>
      </h2>
      
      <el-table
        v-if="tableDate.data.length > 0"
        stripe
        v-loading="tableDate.loading"
        :data="tableDate.data"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" type="index" />
        <el-table-column label="开始日期" prop="beginDate">
          <template slot-scope="{ row }">
            <el-date-picker
              v-model="row.beginDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始日期"
              style="width: 100%"
              disabled
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="结束日期" prop="endDate">
          <template slot-scope="{ row }">
            <el-date-picker
              v-model="row.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择结束日期"
              style="width: 100%"
              disabled
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="salePrice">
          <template slot-scope="{ row }">
            <el-input
              placeholder="请输入内容"
              v-model="row.salePrice"
              style="width: 100%"
              disabled
            >
              <template slot="prepend">¥</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存" prop="inventory">
          <template slot-scope="{ row }">
            <el-input
              placeholder="请输入库存"
              v-model="row.inventory"
              style="width: 100%"
              disabled
            >
              <template slot="append">间</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          class-name="small-padding"
          align="center"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              icon="el-icon-edit"
              circle
              title="编辑"
              @click="handleBtnEdit(scope.row, scope.$index)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              title="删除"
              @click="handleBtnDelete(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="empty" v-else>点击添加日期段设置</div>

      <div class="btn-group">
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-plus-outline"
          @click="handleBtnAdd"
        >
          添加日期段
        </el-button>
      </div>
      <div slot="footer" class="footer">
        <el-button @click="form.show = false">关 闭</el-button>
        <el-button type="primary" @click="handleDialogSubmit">确定</el-button>
      </div>
    </KiFormDialog>

    <!-- 价格设置弹框 -->
    <areaPriceDialog :form="areaPriceTarget" @change="onAreaPriceDialogChange">
    </areaPriceDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import areaPriceDialog from "./areaPrice";

export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
  },
  components: {
    areaPriceDialog,
  },
  data() {
    return {
      // 表格数据
      tableDate: {
        loading: false,
        data: [],
      },
      areaPriceTarget: {
        show: false,
        data: null,
      },
    };
  },
  methods: {
    onAreaPriceDialogChange(obj) {
      const arr = this.tableDate.data;
      let index=this.$lo.findIndex(arr, its=>{ 
        return its.id == obj.id; 
      });
      if(index>-1){
        arr.splice(index,1,obj);
      }else{
        arr.push(obj);
      }
      this.$set(this.tableDate, "data", arr);
    },
    /**
     * 弹框关闭
     * @return Void
     */
    handleDialogClose() {
      this.$set(this.tableDate, "data", []);
      this.$emit("change");
    },
    /**
     * 确认按钮提交
     * @return Void
     */
    handleDialogSubmit() {
      if (this.tableDate.data.length <= 0) {
        this.$swal.warning("当前还未设置日历价格，请先点击添加日期段设置");
        return false;
      }
      if (this.tableDate.loading) {
        return false;
      }
      this.$set(this.tableDate, "loading", true);
      let params = this.$lo.cloneDeep(this.tableDate.data);
      params.forEach((its) => {
        its.salePrice = its.salePrice * 100;
      });
      this.$POST("sot-admin-api/hotel/self-room-price/batchCreate", params)
        .then((res) => {
          this.$swal.success("添加成功");
          this.$set(this.form, "show", false);
        })
        .finally((e) => {
          this.$set(this.tableDate, "loading", false);
        });
    },
    /**
     * 添加按钮
     * @return Void
     */
    handleBtnAdd() {
      let length = this.tableDate.data.length;
      if (length < 10) {
        // this.tableDate.data.splice(length, 0, {});
        this.$set(this.areaPriceTarget, "data", this.$lo.cloneDeep(this.form.data));
        this.$set(this.areaPriceTarget, "show", true);
      } else {
        this.$alert("最多允许新增10个日期段哦", "提示", {
          confirmButtonText: "知道了",
        });
      }
    },
    /**
     * 删除按钮
     * @param {Number}} index
     * @return Void
     */
    handleBtnDelete(index) {
      this.tableDate.data.splice(index, 1);
    },
    /**
     * 编辑按钮
     * @param {Object}} row
     * @param {Number}} index
     * @return Void
     */
    handleBtnEdit(row, index) {
      const _row=this.$lo.cloneDeep(row)
      this.$set(this.areaPriceTarget, "data", _row);
      this.$set(this.areaPriceTarget, "show", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  h2{
    font-size: 15px;
    strong{
      &:first-child{
        margin-right: 12px;
      }
      &:last-child{
        color:#6c6c6c;
      }
    }
  }
  .empty {
    margin: 18px auto 0;
    text-align: center;
    font-size: 15px;
  }
  .btn-group {
    margin: 18px auto 0;
    text-align: center;
  }
}
</style>
